<template>
<el-container>
  <el-header class="auto"><goback :content="content"></goback></el-header>
  <el-main>
    <el-tabs type="border-card" @tab-click="getTab" v-model="tab">
      <el-tab-pane label="行政报销" name="1" v-if="is_baoxiao">
        <applyBaoXiao></applyBaoXiao>
      </el-tab-pane>
      <el-tab-pane label="用车申请" name="2" v-if="ableApply">
        <applyCar></applyCar>
      </el-tab-pane>
      <el-tab-pane label="物料申请" name="3" v-if="ableApply">
        <applyMaterial></applyMaterial>
      </el-tab-pane>
      <el-tab-pane label="加班申请" name="4" v-if="ableApply">
        <applyWork></applyWork>
      </el-tab-pane>
      <el-tab-pane label="交通申请" name="5" v-if="ableApply">
        <applyTraffic></applyTraffic>
      </el-tab-pane>
      <el-tab-pane label="休假申请" name="6" v-if="is_xiujia">
        <applyLeavel></applyLeavel>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label" name="7" >公告管理</span>
        <noticeList></noticeList>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</el-container>
</template>

<script>
import goback from "../common/goback";
import applyBaoXiao from "./sub/applyBaoXiao";
import applyCar from "./sub/applyCar";
import applyLeavel from "./sub/applyLeavel";
import applyMaterial from "./sub/applyMaterial";
import applyTraffic from "./sub/applyTraffic";
import applyWork from "./sub/applyWork";
import {mapActions} from 'vuex'
import {isAbleApply} from '@/apilist/Admin'
import noticeList from "./noticeList";

export default {
  name: "admin",
  data(){
    return {
        content:"行政报销",
        tab: '7',
        ableApply: false,//是否可申请
        is_baoxiao: false,//可报销
        is_xiujia: false,//可休假
    }
  },

  components:{noticeList, goback,applyBaoXiao,applyCar,applyLeavel,applyMaterial,applyTraffic,applyWork},
    methods: {
      ...mapActions("AdminData",["getApplyListActions"]),
        getTab(tab){
            const {_props:obj} = tab
            let name = obj.name
            switch(name){
                case '2':
                case '3':
                case '4':
                case '5':
                    this.getApplyListActions()
                    break;
            }
        },
    },
    mounted() {
        isAbleApply().then(res => {
            this.ableApply = res.data.is_able
            this.is_baoxiao = res.data.is_baoxiao
            this.is_xiujia = res.data.is_xiujia
            if(this.is_baoxiao) {
                this.tab = '1'
            } else if(this.ableApply){
                this.tab = '2'
            }else{
                this.tab = '6'
            }
        });
    }
}
</script>

<style scoped>
.w80{width:300px;}
</style>
